<template>
  <div class="project-bar-data">
    <div
      id="project-type-box"
      class="data-box"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "ProjectBarData",
  props: {
    msg: String,
  },
  data() {
    return {};
  },
  created() {
    this.$nextTick(() => {
      this.generateChart();
    });
  },
  methods: {
    generateChart() {
      let rentalEchart = echarts.init(
        document.getElementById("project-type-box")
      );
      let option = this.generateOptions();
      rentalEchart.setOption(option);
    },
    generateOptions() {
      let option = {
        title: {
          text: "项目类型占比",
          left: "center",
          top: "5%",
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        // legend: {
        //   orient: "vertical",
        //   x: "left",
        //   y: "top",
        //   textStyle: {
        //     fontSize: 12,
        //   },
        // },
        grid: {
          left: "8%",
          right: "0",
          bottom: "1%",
          containLabel: true,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "16",
                fontWeight: "bold",
                color: "#fff",
              },
            },
            labelLine: {
              show: false,
            },
            //   name: "Access From",
            //   type: "pie",
            //   radius: ["40%", "70%"],
            //   avoidLabelOverlap: false,
            //   label: {
            //     show: false,
            //     position: "center",
            //   },
            //   emphasis: {
            //     label: {
            //       show: true,
            //       fontSize: "40",
            //       fontWeight: "bold",
            //     },
            //   },
            //   labelLine: {
            //     show: false,
            //   },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      };

      return option;
    },
  },
};
</script>
<style scoped lang="less">
@import "../common/css/common";
.project-bar-data {
  width: 100%;
  height: 200px;
  background: #ffffff;
  padding: 15px;
  box-sizing: border-box;
}
.data-box {
  width: 100%;
  height: 200px;
}
</style>
